<!--
 * @Author: xuzehan 123@qq.com
 * @Date: 2023-04-07 15:51:54
 * @LastEditors: xuzehan 123@qq.com
 * @LastEditTime: 2023-04-11 11:13:55
 * @FilePath: \ant-design-vue-jeecg-master\src\views\user\Login.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="container">
    <div class="viewer" ref="aff">
      <vc-viewer @ready="ready" :info-box="false" :logo="fasle">
        <vc-layer-imagery :alpha="alpha" :brightness="brightness" :contrast="contrast" :sort-order="10">
          <vc-provider-imagery-baidumap
            :map-style="mapStyle"
            :projection-transforms="projectionTransforms"
          ></vc-provider-imagery-baidumap>
        </vc-layer-imagery>
        <vc-layer-imagery :sort-order="6">
          <vc-provider-imagery-tianditu
            map-style="img_w"
            token="436ce7e50d27eede2f2929307e6b33c0"
          ></vc-provider-imagery-tianditu>
        </vc-layer-imagery>
      </vc-viewer>

      <!-- </a-modal> -->
    </div>

    <XDZYFP class="XDZYFP" />
    <WLZTXX class="WLZTXX" />
    <SXZY class="SXZY" />
    <PDZY class="PDZY" />
  </div>
</template>
<script>
import XDZYFP from './modules/XDZYFP.vue'
import WLZTXX from './modules/WLZTXX.vue'
import PDZY from './modules/PDZY.vue'
import SXZY from './modules/SXZY.vue'
export default {
  components: {
    XDZYFP,
    WLZTXX,
    PDZY,
    SXZY,
  },
  data() {
    return {
      visible: true,
      cesiumInstance,
      curInfo: {},
      mapStyle: 'img',
      alpha: 1,
      brightness: 1,
      contrast: 1,
      start: null,
      stop: null,
      projectionTransforms: {
        form: 'BD09',
        to: 'WGS84',
      },
      camera: {
        position: { lng: 109, lat: 34, height: 2000 },
        heading: 6.259802922203329,
        pitch: -1.5382656190477708,
        roll: 0,
      },
    }
  },
  watch: {
    // $route: {
    //   handler(val) {
    //     console.log(val)
    //     if (val.name == 'situationDisplay') {
    //       location.replace(location)
    //     }
    //   },
    //   deep: true,
    //   // immediate: true
    // },
  },

  mounted() {},
  methods: {
    getRefsAff() {
      return this.$refs.aff
    },
    ready(cesiumInstance) {
      const { Cesium, viewer } = cesiumInstance
      this.cesiumInstance = cesiumInstance
      viewer._cesiumWidget._creditContainer.style.display = 'none'
      let _this = this
      // Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Rectangle.fromDegrees(80, 22, 130, 55) // 默认定位到中国上空，home定位到中国范围
      viewer.camera.setView({ destination: Cesium.Cartesian3.fromDegrees(104.39, 34.9, 5000000) })
      let scene = viewer.scene
      var handler3D = new Cesium.ScreenSpaceEventHandler(scene.canvas)
      handler3D.setInputAction(function (movement) {
        var pick = scene.pick(movement.position)
        // let cartesian = viewer.camera.pickEllipsoid(movement.position)
        // let cartographic1 = Cesium.Cartographic.fromCartesian(cartesian)
        // let lng = Cesium.Math.toDegrees(cartographic1.longitude) //  经度
        // let lat = Cesium.Math.toDegrees(cartographic1.latitude) //  纬度
        // let alt = cartographic1.height //  高度，椭球面height永远等于0
        // let coordinate = {
        //   longitude: Number(lng.toFixed(5)),
        //   latitude: Number(lat.toFixed(5)),
        //   altitude: Number(alt.toFixed(2)),
        // }
        if (pick && pick.id) {
          console.log(pick.id.id, '-*-*-')
          _this.$router.push({
            name: 'baseStationChannel-baseStationInfo',
          })
        }
      }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
      // var start = new Cesium.JulianDate.fromDate(new Date()) // 当前时间
      // start = Cesium.JulianDate.addHours(start, 8, new Cesium.JulianDate()) //东八区时间
      // this.start = start
      // // 结束时间
      // var stop = Cesium.JulianDate.addSeconds(start, this.moveDuration, new Cesium.JulianDate())
      // this.stop = stop
      // //确保查看器处于预期的时间
      // viewer.clock.startTime = start.clone()
      // viewer.clock.stopTime = stop.clone()
      // viewer.clock.currentTime = start.clone()
      // viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP //循环结束时
      // //时间变化来控制速度 // 时间速率，数字越大时间过的越快
      // viewer.clock.multiplier = 1
      // // viewer.timeline.container.style.display = 'none'
      // // viewer.animation._container.style.display = 'none'
      // //给时间线设置边界
      // viewer.timeline.zoomTo(start, stop)
      //抗锯齿
      viewer.scene.fxaa = true
      //需要纯色背景必须设置

      this.addpoint(116.147522, 39.81773, '云岗站', 0)
      this.addCar(103.0744619, 40.0503706)
      this.addCar(113.0744619, 34.0503706)
      this.addCar(103.0744619, 34.0503706)
      this.addCar(113.0744619, 40.0503706)
      // this.addCar1()
      this.draw()
      // this.drawFD()
      this.drawLine()
    },
    addpoint(lng, lat, name, status) {
      const { Cesium, viewer } = this.cesiumInstance
      viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(lng, lat),
        // id: '飞机1', //id唯一
        point: {
          color: Cesium.Color.PURPLE,
          // status == 0
          //   ? Cesium.Color.RED
          //   : status == 1
          //   ? Cesium.Color.YELLOW
          //   : Cesium.Color.fromCssColorString('#7bf35d'),
          pixelSize: 10,
        },
        label: {
          //文字标签
          text: name,
          font: '500 30px Helvetica', // 15pt monospace
          scale: 0.5,
          style: Cesium.LabelStyle.FILL,
          fillColor: Cesium.Color.BLACK,
          pixelOffset: new Cesium.Cartesian2(0, -15), //偏移量
          showBackground: true,
          backgroundColor: new Cesium.Color(26 / 255, 196 / 255, 228 / 255, 0.0), //背景顔色
        },
      })
    },
    addCar(lng, lat, name) {
      const { Cesium, viewer } = this.cesiumInstance
      var position = Cesium.Cartesian3.fromDegrees(lng, lat, 0)
      var heading = Cesium.Math.toRadians(135)
      var pitch = 0
      var roll = 0
      var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll)
      var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr)

      var entity = viewer.entities.add({
        name: 'GroundVehicle',
        position: position,
        orientation: orientation,
        model: {
          uri: '../../../model/GroundVehicle.glb',
          minimumPixelSize: 128,
          maximumScale: 100000,
        },
        billboard: {
          id: 122,
          image: '../../../model/R.png',
          // image: this.img,
          disableDepthTestDistance: Number.POSITIVE_INFINITY, //被遮罩
          scale: 3,
          width: 8,
          height: 8,
          pixelOffset: new Cesium.Cartesian2(0, -8), //偏移量
        },
      })
      var entity = viewer.entities.add({
        name: 'GroundVehicle',
        position: position,
        orientation: orientation,

        billboard: {
          id: 122,
          image: '../../../model/R.png',
          // image: this.img,
          disableDepthTestDistance: Number.POSITIVE_INFINITY, //被遮罩
          scale: 3,
          width: 8,
          height: 8,
          pixelOffset: new Cesium.Cartesian2(-8, -8), //偏移量
        },
      })
      var entity = viewer.entities.add({
        name: 'GroundVehicle',
        position: position,
        orientation: orientation,

        billboard: {
          id: 122,
          image: '../../../model/R.png',
          // image: this.img,
          disableDepthTestDistance: Number.POSITIVE_INFINITY, //被遮罩
          scale: 3,
          width: 8,
          height: 8,
          pixelOffset: new Cesium.Cartesian2(-16, -8), //偏移量
        },
      })
      var entity = viewer.entities.add({
        name: 'GroundVehicle',
        position: position,
        orientation: orientation,

        billboard: {
          id: 122,
          image: '../../../model/R.png',
          // image: this.img,
          disableDepthTestDistance: Number.POSITIVE_INFINITY, //被遮罩
          scale: 3,
          width: 8,
          height: 8,
          pixelOffset: new Cesium.Cartesian2(-24, -8), //偏移量
        },
      })

      // viewer.trackedEntity = entity
    },
    addCar1(lng, lat, name) {
      const { Cesium, viewer } = this.cesiumInstance
      // viewer.entities.add({
      //   id: '159',
      //   position: Cesium.Cartesian3.fromRadians(109, 34),
      //   model: {
      //     uri: '../../../model/GroundVehicle.glb',
      //   },
      // })

      var position = Cesium.Cartesian3.fromDegrees(93.0744619, 34.0503706, 0)
      var heading = Cesium.Math.toRadians(135)
      var pitch = 0
      var roll = 0
      var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll)
      var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr)

      var entity = viewer.entities.add({
        name: 'GroundVehicle',
        position: position,
        orientation: orientation,
        model: {
          uri: '../../../model/GroundVehicle.glb',
          minimumPixelSize: 128,
          maximumScale: 100000,
        },
      })

      // viewer.trackedEntity = entity
    },

    draw() {
      const { Cesium, viewer } = this.cesiumInstance
      const that = this
      // var positionArr = new Cesium.SampledPositionProperty() // 这才是做重要的
      // var lon = 105.0744619 //Math.floor(Math.random() * 360)
      // var lat = 44.0503706 //Math.floor(Math.random() * 360)
      // var hei = 5000000 //1299999 + Math.random() * 1500000
      // for (let k = lat; k <= 360 + lat; k += 30) {
      //   let obj = {
      //     lon: lon,
      //     lat: k,
      //     time: k - lat,
      //     hei: hei,
      //   }
      //   var time = Cesium.JulianDate.addSeconds(this.start, obj.time, new Cesium.JulianDate())
      //   // 经纬度转换为世界坐标
      //   var position1 = Cesium.Cartesian3.fromDegrees(obj.lon, obj.lat, obj.hei)
      //   // console.log(position, 'position');

      //   positionArr.addSample(time, position1)
      //   // positionArr.push(property)
      // }
      var position = Cesium.Cartesian3.fromDegrees(105.0744619, 44.0503706, 5000000)
      var heading = Cesium.Math.toRadians(135)
      var pitch = 0
      var roll = 0
      var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll)
      var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr)
      var entity = viewer.entities.add({
        name: 'weixing ',
        position: position,
        orientation: orientation,
        model: {
          uri: '../../../model/weixin.gltf',
          minimumPixelSize: 128,
          maximumScale: 29000,
        },
      })
      // viewer.entities.add({
      //   availability: new Cesium.TimeIntervalCollection([
      //     new Cesium.TimeInterval({
      //       start: this.start,
      //       stop: this.stop,
      //     }),
      //   ]),
      //   orientation: new Cesium.VelocityOrientationProperty(positionArr),
      //   position: positionArr,
      //   path: {
      //     trailTime: Infinity,
      //     resolution: 1,
      //     // material: Cesium.Color.fromRandom({}),//随机颜色
      //     // material: new Cesium.PolylineGlowMaterialProperty({
      //     //   glowPower: 0.1,
      //     //   // color: Cesium.Color.fromRandom({}),
      //     //   color: Cesium.Color.BULE,
      //     // }),
      //     material: new Cesium.ImageMaterialProperty({
      //       transparent: true, //设置透明
      //       image: that.getColorRamp({
      //         0.0: rgba.withAlpha(1.0).toCssColorString().replace(')', ',1.0)'),
      //         0.045: rgba.withAlpha(0.8).toCssColorString(),
      //         0.1: rgba.withAlpha(0.6).toCssColorString(),
      //         0.15: rgba.withAlpha(0.4).toCssColorString(),
      //         0.37: rgba.withAlpha(0.2).toCssColorString(),
      //         0.54: rgba.withAlpha(0.1).toCssColorString(),
      //         1.0: rgba.withAlpha(0).toCssColorString(),
      //       }), //Canvas
      //     }),
      //     width: 11,
      //   },
      // })
    },
    drawFD() {
      const { Cesium, viewer } = this.cesiumInstance
      var position = Cesium.Cartesian3.fromDegrees(113.0744619, 44.0503706, 2000000)
      var heading = Cesium.Math.toRadians(135)
      var pitch = -90
      var roll = -90
      var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll)
      var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr)
      var entity = viewer.entities.add({
        name: 'GroundVehic2le',
        position: position,
        orientation: orientation,
        billboard: {
          id: 1222,
          image: '../../../model/R.png',
          // image: this.img,
          rotation: 180,
          disableDepthTestDistance: Number.POSITIVE_INFINITY, //被遮罩
          scale: 3,
          width: 12,
          height: 18,
          horizontalOrigin: 0,
          pixelOffset: new Cesium.Cartesian2(-16, -8), //偏移量
        },
      })
    },

    // 通信线
    drawLine() {
      const { Cesium, viewer } = this.cesiumInstance
      const czml = [
        {
          id: 'document',
          name: 'CZML Geometries: Polyline',
          version: '1.0',
        },
        // {
        //   id: 'redLine',
        //   name: 'Red line clamped to terain',
        //   polyline: {
        //     positions: {
        //       cartographicDegrees: [-75, 35, 0, -125, 35, 0],
        //     },
        //     material: {
        //       solidColor: {
        //         color: {
        //           rgba: [255, 0, 0, 255],
        //         },
        //       },
        //     },
        //     width: 5,
        //     clampToGround: true,
        //   },
        // },
        // {
        //   id: 'blueLine',
        //   name: 'Glowing blue line on the surface',
        //   polyline: {
        //     positions: {
        //       cartographicDegrees: [-75, 37, 0, -125, 37, 0],
        //     },
        //     material: {
        //       polylineGlow: {
        //         color: {
        //           rgba: [100, 149, 237, 255],
        //         },
        //         glowPower: 0.2,
        //         taperPower: 0.5,
        //       },
        //     },
        //     width: 10,
        //   },
        // },
        // {
        //   id: 'orangeLine',
        //   name: 'Orange line with black outline at height and following the surface',
        //   polyline: {
        //     positions: {
        //       cartographicDegrees: [105.0744619, 44.0503706, 5000000, 113.0744619, 44.0503706, 2000000],
        //     },
        //     material: {
        //       polylineOutline: {
        //         color: {
        //           rgba: [255, 165, 0, 255],
        //         },
        //         outlineColor: {
        //           rgba: [0, 0, 0, 255],
        //         },
        //         outlineWidth: 0,
        //       },
        //     },
        //     width: 1,
        //   },
        // },
        // {
        //   id: 'purpleLine',
        //   name: 'Purple arrow at height',
        //   polyline: {
        //     positions: {
        //       cartographicDegrees: [105.0744619, 44.0503706, 5000000, 109, 34, 0],
        //     },
        //     material: {
        //       polylineArrow: {
        //         color: {
        //           rgba: [148, 0, 211, 255],
        //         },
        //       },
        //     },
        //     arcType: 'NONE',
        //     width: 1,
        //   },
        // },
        {
          id: 'dashedLine',
          name: 'Blue dashed line',
          polyline: {
            positions: {
              cartographicDegrees: [105.0744619, 44.0503706, 5000000, 116.147522, 39.81773, 0],
            },
            material: {
              solidColor: {
                color: {
                  rgba: [0, 255, 255, 255],
                },
              },
            },
            width: 1,
          },
        },
      ]

      // const viewer = new Cesium.Viewer('cesiumContainer')
      const dataSourcePromise = Cesium.CzmlDataSource.load(czml)
      viewer.dataSources.add(dataSourcePromise)
    },
    getColorRamp(val) {
      if (val == null) {
        val = {
          0.0: 'blue',
          0.1: 'cyan',
          0.37: 'lime',
          0.54: 'yellow',
          1: 'red',
        }
      }
      var ramp = document.createElement('canvas')
      ramp.width = 1
      ramp.height = 100
      var ctx = ramp.getContext('2d')
      var grd = ctx.createLinearGradient(0, 0, 0, 100)
      for (var key in val) {
        grd.addColorStop(1 - Number(key), val[key])
      }
      ctx.fillStyle = grd
      ctx.fillRect(0, 0, 1, 100)
      return ramp
    },
  },
}
</script>
<style lang="less" scoped>
.container {
  position: relative;
}
.XDZYFP {
  position: absolute;
  // width: 35%;

  top: 0px;
  left: 0px;
  // background: #64a4ecfb !important;
  // color: #2f7cc4 !important;
}
.WLZTXX {
  position: absolute;
  // width: 35%;
  bottom: 0px;
  right: 0px;
}
.SXZY {
  position: absolute;
  // width: 35%;
  bottom: 0px;
  left: 0px;
}
.PDZY {
  position: absolute;
  // width: 35%;
  top: 0px;
  right: 0px;
}
.WPZ,
.WJL,
.JL,
.DX {
  display: inline-block;
  width: 15px;
  margin: auto;
  height: 15px;
  border-radius: 50%;
  margin-right: 5px;
}
.WPZ {
  background: red;
}
.WJL {
  background: rgb(230, 215, 19);
}
.JL {
  background: rgb(80, 226, 60);
}
.DX {
  background: rgb(119, 118, 118);
}
.keyBox {
  background: rgb(252, 249, 249);
  position: absolute;
  left: 45%;
  // right: 50%;
  margin: auto;
  top: 15px;
  // width: 150px;
  line-height: 32px;
  color: #000;
  height: auto;
  // border: 1px solid red;
  display: flex;
  // flex-direction: column;
  border-radius: 15px;
  padding: 5px;
  div {
    padding: 0 2px;
  }
}
.cesium-widget-credits {
  display: none !important;

  visibility: hide !important;
}
.viewer {
  width: 100%;
  height: calc(100vh - 130px);
  margin: auto;
  /* position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; */
}
</style>
